<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绩效</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_historyfeesummary.css" />
    <link rel="stylesheet" type="text/css" href="css/customerservicelist.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../script/mui/mui.reset.css" />
    <link rel="stylesheet" type="text/css" href="css/analysis_equipment_frm.css" />
    <style>
        .app_list_chart{
            display:flex;
            align-items:unset;
            justify-content:left;
            border-bottom: solid 0.5px #eee;
            padding-bottom: 12px;
        }
        .person{
            width: 80%;
        }
        .per_name{
            font-size: 0.8rem;
        }
        .per_name span{
            font-size: 0.6rem;
            margin-left: 10px;
            color: #999;
        }
        .per_num{
            font-size: 0.65rem;
            color: #999;
        }
        .rigthicon{
            width: 20%;
            text-align: right;
            color: #999;
        }
        .performance_box{
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
        }
        .pfor_title{
            font-weight: 600;
            font-size: 0.75rem;
        }
        .pfor_title span{
            margin-right: 20px;
        }
        .pfor_main{
            width: 100%;
            margin-top: 20px;
        }
        .annulusBasics{
            margin: 0 auto;
        }
      
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <div v-if="showsearchparam" class="searchparam nomenu" style="min-height:10%; max-height: 50%;">
            <div class="searchcontent" style="height: 100%;">
                <div class="searchparamtitle" v-if="form.ProjectCompanyType==1">
                    按姓名筛选
                </div>
                <div class="searchparamitem" v-if="form.ProjectCompanyType==1">
                    <label v-on:click="doSelectProject(item.value,item.label)" v-bind:class="{'active':form.ProjectIDs.indexOf(item.value)>-1}" v-for="item in projectList">{{item.label}}</label>
                </div>
                <div class="aui_bottom">
                    <div v-on:click="doReset(1)" class="aui_bottombtn left">重置</div>
                    <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
                </div>
            </div>
        </div>
        <div class="search_box fixedbox bgshadow" v-bind:class="{'fixedbox':showsearch}">
            <div class="searchitem" v-bind:class="{'chkedbox':showsearchparam}" v-on:click="doSelectSearchParam(1)">
                筛选
                <i v-if="!showsearchparam" class="icon iconfont icon-down"></i>
                <i v-if="showsearchparam" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
            <div id="datemonth" data-options='{"type":"month"}' class="searchitem" v-bind:class="{'chkedbox':showsearchmonth}" v-on:click="doSelectSearchParam(2)">
                {{form.startMonth}}
                <i v-if="!showsearchmonth" class="icon iconfont icon-down"></i>
                <i v-if="showsearchmonth" class="icon iconfont icon-shangjiantou" style="color:#fff;"></i>
            </div>
        </div>
        <div class="aui-content" style="margin-top: 2.3rem;">
            <!--<div class="newcontentbox">
                <label class="bababa"> {{ProjectName}} </label>
                <label class="lr-line" > | </label>
                <label class="bababa"> {{form.startMonth}} 统计 </label>
                <div class="newcontentbox-right" ><i v-on:click="open_task()" class="icon iconfont icon-xiangyoujiantou bababa" style="font-size: 0.6rem;" ></i></div>
            </div> -->

            <div class="boxarea mainbox" v-for="item in list">
                <div  class="app_list_chart" v-on:click="do_persondetail(item.id)">
                  <div class="person fl">
                      <div class="per_name">{{item.userName}}<span>{{item.departmentName}}</span></div>
                      <div class="per_num">{{item.phoneNumber}}</div>
                  </div>
                  <div class="rigthicon fr"><i class="icon iconfont icon-xiangyoujiantou"></i></div>
                </div>
                <div class="performance_box">
                    <div class="pfor_title">
                        <span>工单完成数：{{item.completeCount}}</span><span>工单未完成数：{{item.notCompleteCount}}</span>
                    </div>
                    <div class="pfor_main">
                        <div class="guandanSty">
                            <div class="completecicle">
                                <div class="annulusBasics">
                                    <div class="centerCircle" v-if="item.completePercent*100>0">{{(item.completePercent*100).toFixed(2)}}%</div>
                                    <div class="centerCircle" v-else>0%</div>
                                    <div class="annulusOuter"></div>
                                    <div v-if="(item.completePercent*100)>50" class="leftRectangle" v-bind:style="activeTransform"></div>
                                    <div v-if="(item.completePercent*100)>50" class="rightRectangle" style="background: #289fff"></div>
                                    <div v-if="(item.completePercent*100)<=50" class="leftRectangle"></div>
                                    <div v-if="(item.completePercent*100)<=50" class="rightRectangle" v-bind:style="activeTransform"></div>
                                    <div class=repairAnnulus></div>
                                </div>
                                <div style="text-align:center; font-size:0.7rem; padding-top:10px;">
                                    工单完成率
                                </div>
                            </div>
                            <div class="CircleMsgbox">
                                <div class="msgitem fontstyle">
                                    <div class="msg-title">最高评分</div>
                                    <div>{{item.maxRate}}</div>
                                </div>
                                <div class="msgitem fontstyle">
                                    <div class="msg-title">最低评分</div>
                                    <div>{{item.minRate}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>    
        </div>

        
        <!-- <div v-if="ReportType!=0&&XJlist.length<=0&&userList.length<=0" class="noinfo" id="noorder" >
            <img src="../image/index/noinfomsg_icon.png" alt="" />
            <h5><br />暂无数据</h5>
        </div> -->
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.poppicker.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/page/dateRangeUtil.js"></script>
<script type="text/javascript" src="../script/highcharts/highcharts.js"></script>
<script type="text/javascript" src="../script/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="js/performance_frm.js"></script>

</html>
